<template>
  <div class="rankinglist">
    <!-- 左边榜单列表 -->
    <div class="left">
      <div class="leftone">
        <h2>
          {{ rankinglist.artistToplist && rankinglist.artistToplist.name }}
        </h2>
        <ul
          v-for="item in rankinglist.list.slice(0, 8)"
          :key="item.id"
          class="featurelist"
        >
          <li @click="handleGetId(item.id)" id="background">
            <div class="item">
              <div class="itemleft">
                <a href="#">
                  <img :src="item.coverImgUrl" alt="" />
                </a>
              </div>
              <div class="biao">
                <p class="biusheng">
                  <a href="#">{{ item.name }}</a>
                </p>
                <p>{{ item.updateFrequency }}</p>
              </div>
            </div>
          </li>
        </ul>
        <h2>{{ rankinglist.artistToplist.name }}</h2>
        <ul
          v-for="item in rankinglist.list ? rankinglist.list.slice(9, 31) : []"
          :key="item.id"
          class="featurelist"
        >
          <li @click="handleGetId(item.id)" id="background">
            <div class="item">
              <div class="itemleft">
                <a href="#">
                  <img :src="item.coverImgUrl" alt="" />
                </a>
              </div>
              <div class="biao">
                <p class="biusheng">
                  <a href="#">{{ item.name }}</a>
                </p>
                <p>{{ item.updateFrequency }}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 右边榜单列表 -->
    <div class="right">
      <div class="right-one">
        <div class="biaoshengbf">
          <div class="biaoshengimg">
            <img :src="rankingLists.coverImgUrl" alt="" class="rankingImg" />
          </div>
          <div class="biaoshenginfo">
            <div class="xddmm">
              <p>{{ rankingLists.name }}</p>
            </div>
            <div class="xddmmk">
              <img src="./images/时间.jpg" alt="" />
              <span style="margin-left: 5px"
                >最近更新:{{ rankingLists.updateFrequency }}</span
              >
              <span>（更新68首）</span>
            </div>
            <div class="xddmmkt">
              <el-button type="primary" size="mini" icon="el-icon-video-play"
                >播放</el-button
              >
              <el-button size="mini" icon="el-icon-folder-add"
                >123456</el-button
              >
              <el-button size="mini" icon="el-icon-folder-checked"
                >9527</el-button
              >
              <el-button size="mini" icon="el-icon-download">下载</el-button>
            </div>
          </div>
        </div>
        <!-- 右边歌曲列表 -->
        <div class="songlist">
          <div class="songlistone">
            <h3>歌曲列表</h3>
            <span>100首歌</span>
            <span class="bofang">播放：<strong>4295013376</strong>次</span>
          </div>
        </div>
        <!-- element-table区域 -->
        <el-table
          class="tablebur"
          :data="tableData"
          stripe
          style="width: 680px"
          size="mini"
        >
          <el-table-column prop="date" label="" width="58"> </el-table-column>
          <el-table-column label="">
            <template v-slot="{ row }">
              <img
                :src="row.al.picUrl"
                width="45"
                height="45"
                class="head_pic"
                @click="handleGotoPlay(row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="">
            <template>
              <img
                src="./images/1622551385(1).jpg"
                width="26"
                height="26"
                class="head_pic"
                @click="handleGotoPlay(row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="al.name"
            label="标题"
            width="250"
            property="al.name"
          >
          </el-table-column>
          <el-table-column prop="dt" label="时长" width="90" property="dt">
          </el-table-column>
          <el-table-column
            prop="ar[0].name"
            label="歌手"
            width="120"
            property="ar.name"
          >
          </el-table-column>
        </el-table>
        <!-- 评论区 -->
        <div class="songlist">
          <div class="songlistone">
            <h3>评论</h3>
            <span>共95279527条评论</span>
          </div>
        </div>
        <div class="comment">
          <div class="comment-title">
            <div class="comment-textarea">
              <img src="./images/touxiang.jpg" alt="" />
              <textarea
                name=""
                id=""
                cols="98"
                rows="5"
                placeholder="评论"
              ></textarea>
            </div>
            <div class="nice">
              <img src="./images/23123(1).jpg" alt="" />
              <img src="./images/123.jpg" alt="" />
              <div class="pinlunbtn">
                <span style="color: gray; margin-right: 5px">140</span>
                <el-button type="primary" size="mini">评论</el-button>
              </div>
            </div>
          </div>
          <!-- 精彩评论区 -->
          <div class="songlist-1">
            <span>精彩评论</span>
            <div class="commentlist">
              <div class="flex">
                <img src="./images/touxiang.jpg" alt="" />
                <div class="commenttext">
                  <a href="#" style="color: blue">甄春辉</a>
                  <span
                    >：许巍有《蓝莲花》高梨康治有《红莲》翁大涵有《白莲》马琪龙有《青莲》，最近又火了一个啥榴莲，我孙某人只有不要b莲</span
                  >
                </div>
              </div>
              <div class="commentnice">
                <span>1942年11月26日</span>
                <div class="dianzan">
                  <a href="#"><span class="el-icon-star-off">（9527）</span></a>
                  <span class="niceshu">|</span>
                  <a href="#"><span>回复</span></a>
                </div>
              </div>
            </div>
            <div class="commentlist">
              <div class="flex">
                <img src="./images/touxiang.jpg" alt="" />
                <div class="commenttext">
                  <a href="#" style="color: blue">甄春辉</a>
                  <span
                    >：许巍有《蓝莲花》高梨康治有《红莲》翁大涵有《白莲》马琪龙有《青莲》，最近又火了一个啥榴莲，我孙某人只有不要b莲</span
                  >
                </div>
              </div>
              <div class="commentnice">
                <span>1942年11月26日</span>
                <div class="dianzan">
                  <a href="#"><span class="el-icon-star-off">（9527）</span></a>
                  <span class="niceshu">|</span>
                  <a href="#"><span>回复</span></a>
                </div>
              </div>
            </div>
            <div class="commentlist">
              <div class="flex">
                <img src="./images/touxiang.jpg" alt="" />
                <div class="commenttext">
                  <a href="#" style="color: blue">甄春辉</a>
                  <span
                    >：许巍有《蓝莲花》高梨康治有《红莲》翁大涵有《白莲》马琪龙有《青莲》，最近又火了一个啥榴莲，我孙某人只有不要b莲</span
                  >
                </div>
              </div>
              <div class="commentnice">
                <span>1942年11月26日</span>
                <div class="dianzan">
                  <a href="#"><span class="el-icon-star-off">（9527）</span></a>
                  <span class="niceshu">|</span>
                  <a href="#"><span>回复</span></a>
                </div>
              </div>
            </div>
            <div class="commentlist">
              <div class="flex">
                <img src="./images/touxiang.jpg" alt="" />
                <div class="commenttext">
                  <a href="#" style="color: blue">甄春辉</a>
                  <span
                    >：许巍有《蓝莲花》高梨康治有《红莲》翁大涵有《白莲》马琪龙有《青莲》，最近又火了一个啥榴莲，我孙某人只有不要b莲</span
                  >
                </div>
              </div>
              <div class="commentnice">
                <span>1942年11月26日</span>
                <div class="dianzan">
                  <a href="#"><span class="el-icon-star-off">（9527）</span></a>
                  <span class="niceshu">|</span>
                  <a href="#"><span>回复</span></a>
                </div>
              </div>
            </div>
            <div class="commentlist">
              <div class="flex">
                <img src="./images/touxiang.jpg" alt="" />
                <div class="commenttext">
                  <a href="#" style="color: blue">甄春辉</a>
                  <span
                    >：许巍有《蓝莲花》高梨康治有《红莲》翁大涵有《白莲》马琪龙有《青莲》，最近又火了一个啥榴莲，我孙某人只有不要b莲</span
                  >
                </div>
              </div>
              <div class="commentnice">
                <span>1942年11月26日</span>
                <div class="dianzan">
                  <a href="#"><span class="el-icon-star-off">（9527）</span></a>
                  <span class="niceshu">|</span>
                  <a href="#"><span>回复</span></a>
                </div>
              </div>
            </div>
            <div class="commentlist">
              <div class="flex">
                <img src="./images/touxiang.jpg" alt="" />
                <div class="commenttext">
                  <a href="#" style="color: blue">甄春辉</a>
                  <span
                    >：许巍有《蓝莲花》高梨康治有《红莲》翁大涵有《白莲》马琪龙有《青莲》，最近又火了一个啥榴莲，我孙某人只有不要b莲</span
                  >
                </div>
              </div>
              <div class="commentnice">
                <span>1942年11月26日</span>
                <div class="dianzan">
                  <a href="#"><span class="el-icon-star-off">（9527）</span></a>
                  <span class="niceshu">|</span>
                  <a href="#"><span>回复</span></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'RankingList',
  data() {
    return {
      tableData: [],
      listId: 19723756,
      rankingLists: {}
    }
  },
  computed: {
    ...mapState({
      commendsongs: state => state.rankinglist.commendsongs,
      rankinglist: state => state.rankinglist.rankinglist
    })
  },
  methods: {
    ...mapActions(['rankinglist','getRankingList']),
    ...mapActions(['rankinglist','getCommendSongs']),
    handleGotoPlay(row) {
      this.$router.push({ path: '/singleplay', query: { ids: row.id } })
    },
    async handleGetId(id) {
      this.listId = id
      await this.getCommendSongs(this.listId)
      this.tableData = this.commendsongs.tracks
    }
  },
  watch: {
    listId(newVal) {
      this.rankingLists = this.rankinglist.list.find(item => {
        return item.id === newVal
      })
    }
  },
  async mounted() {
    await this.getRankingList()
    await this.getCommendSongs(this.listId)
    this.rankingLists = this.rankinglist.list[0]
    this.tableData = this.commendsongs.tracks
    console.log(this.tableData)

    for (let i = 0; i < this.tableData.length; i++) {
      let dt = this.tableData[i].dt
      let min = parseInt(dt / 1000 / 60)
      let sec = parseInt((dt / 1000) % 60)
      if (min < 10) {
        min = '0' + min
      }
      if (sec < 10) {
        sec = '0' + sec
      }
      this.tableData[i].dt = `${min}:${sec}`
    }
  }
}
</script>

<style>
html {
  background: rgb(245, 245, 245);
}
#background:hover {
  background-color: rgb(212, 212, 212);
}
.rankinglist {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  background: white;
  border-right: 1px solid rgb(204, 203, 203);
  border-bottom: 1px solid rgb(204, 203, 203);
}
.rankinglist .left {
  width: 240px;
  border-left: 1px solid rgb(204, 203, 203);
  border-right: 1px solid rgb(204, 203, 203);
  border-bottom: 1px solid rgb(204, 203, 203);
}
.itemleft img {
  width: 40px;
  height: 40px;
}
.item {
  display: flex;
}
.biao {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}
.biao .biusheng {
  margin: 2px 0px 8px;
}
/* .background {
  background-color: rgb(230, 230, 230);
} */
.leftone ul li {
  padding: 10px 0 10px 20px;
}
.leftone h2 {
  font-size: 15px;
  margin-top: 30px;
  margin-left: 10px;
  padding-bottom: 5px;
}
.right {
  width: 740px;
}
.right p {
  font-size: 20px;
}
.right-one .biaoshengbf {
  width: 660px;
  height: 158px;
  margin: 40px 40px 40px 40px;
  display: flex;
}
.biaoshengimg {
  width: 155px;
  height: 155px;
  border: 1px solid rgb(206, 206, 206);
}
.biaoshengimg img {
  padding: 3px 3px 3px 3px;
}
.biaoshenginfo {
  width: 473px;
  height: 114px;
  margin: 20px 20px 20px 20px;
}
.biaoshenginfo .xddmmk {
  margin: 15px 0 28px;
}
.biaoshenginfo .xddmmk img {
  width: 13px;
  height: 13px;
}
.biaoshenginfo .xddmmkt img {
  border-radius: 15%;
  width: 70px;
  height: 31px;
}
.songlist {
  width: 675px;
  height: 35px;
  border-bottom: 2px solid rgb(187, 5, 5);
  margin: 0 auto;
  line-height: 35px;
}
.songlist h3 {
  font-size: 20px;
  font-weight: inherit;
  display: inline-block;
  margin-right: 20px;
}
.songlist strong {
  color: rgb(187, 5, 5);
}
.songlist .bofang {
  margin-left: 400px;
}
.right-one .tablebur {
  margin: 0 auto;
  margin-bottom: 40px;
}
.comment {
  height: 1000px;
  margin-top: 20px;
}
.comment-title {
  width: 670px;
  height: 150px;
  margin: 0 auto;
}
.comment-textarea {
  display: flex;
}
.comment-textarea textarea {
  margin-top: 10px;
  outline: none;
}
.comment-textarea img {
  width: 50px;
  height: 50px;
  margin: 10px;
}
.nice {
  width: 599px;
  height: 35px;
  display: block;
  margin-left: 70px;
  display: flex;
}
.nice img {
  width: 23px;
  height: 23px;
}
.nice .pinlunbtn {
  margin-left: 470px;
  margin-top: 5px;
}
.songlist-1 {
  width: 675px;
  height: 30px;
  border-bottom: 1px solid rgb(201, 201, 201);
  margin: 0 auto;
  line-height: 35px;
  margin-top: 20px;
}
.commentlist {
  width: 670px;
  height: 102px;
  padding: 15px 0;
  border-bottom: 1px dotted gray;
}
.flex {
  display: flex;
}
.commentlist img {
  width: 50px;
  height: 50px;
  margin: 10px;
}
.commentnice {
  width: 600px;
  height: 20px;
  margin-left: 62px;
  line-height: 20px;
  padding-left: 7px;
}
.commentnice span {
  color: gray;
}
.commentnice .dianzan {
  display: inline-block;
  margin-left: 350px;
}
.commentnice .dianzan .niceshu {
  margin: 0 8px 0 0;
}
.rankingImg {
  height: 150px;
  width: 150px;
}
</style>
